<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,height=device-height,viewport-fit=cover,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Test</title>
	<style>
		button {
			line-height: 2em;
		}
	</style>
</head>
<body>
	<section>
		<h2>文档</h2>
		<p><a href="http://confluence.ppdai.com/pages/viewpage.action?pageId=12423347">H5客户端交互</a></p>
		<p>ver 0.0.26</p>
	</section>
	<section>
		<ol>
			<li>
				<h3>显示原生Loading</h3>
				<button onclick="showLoading()">showLoading</button>
				<script>
					var showLoading = function () {
						try {
							WebViewJavascriptBridge.callHandler('showLoading', {
								'code': 1,
								'name': '显示原生Loading',
								'data': {}
							});
						} catch(ex) {
							try {
								AppBridge.showLoading();
							} catch(ex) {
								alert('showLoading failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>隐藏原生Loading</h3>
				<button onclick="dismissLoading()">dismissLoading</button>
				<script>
					var dismissLoading = function () {
						try {
							WebViewJavascriptBridge.callHandler('showLoading', {
								'code': 1,
								'name': '显示原生Loading',
								'data': {}
							});
							setTimeout(function () {
								WebViewJavascriptBridge.callHandler('dismissLoading', {
									'code': 1,
									'name': '隐藏原生Loading',
									'data': {}
								});
							}, 2000);
						} catch(ex) {
							try {
								AppBridge.showLoading();
								setTimeout(function () {
									AppBridge.dismissLoading();
								}, 2000);
							} catch (ex) {
								alert('dismissLoading failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>调用或跳转原生系统界面</h3>
				<button onclick="openURL('telprompt://10086')">openURL</button>
				<script>
					var openURL = function (url) {
						try {
							WebViewJavascriptBridge.callHandler('openURL', {
								'code': 1,
								'name': '调用或跳转原生系统界面',
								'data': {
									'url': url
								}
							});
						} catch(ex) {
							try {
								AppBridge.openURL(url);
							} catch (ex) {
								alert('openURL failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>返回最近原生界面</h3>
				<a href="app_test_next.html">app_test_next.html</a>
			</li>
			<li>
				<h3>返回首页</h3>
				<button onclick="navigateHome()">navigateHome</button>
				<script>
					var navigateHome = function () {
						try {
							WebViewJavascriptBridge.callHandler('navigateHome', {
								'code': 1,
								'name': '返回首页',
								'data': {}
							});
						} catch(ex) {
							try {
								AppBridge.navigateHome();
							} catch (ex) {
								alert('navigateHome failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>返回标签首页</h3>
				<button onclick="navigateTabHome()">navigateTabHome</button>
				<script>
					var navigateTabHome = function () {
						try {
							WebViewJavascriptBridge.callHandler('navigateTabHome', {
								'code': 1,
								'name': '返回标签首页',
								'data': {}
							});
						} catch(ex) {
							try {
								AppBridge.navigateTabHome();
							} catch (ex) {
								alert('navigateTabHome failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>跳转指定原生界面</h3>
				<button onclick="navigateTo('')">navigateTo</button>
				<script>
					var navigateTo = function (url) {
						try {
							WebViewJavascriptBridge.callHandler('navigateTo', {
								'code': 1,
								'name': '跳转指定原生界面',
								'data': {
									'url': url
								}
							});
						} catch(ex) {
							try {
								AppBridge.navigateTo(url);
							} catch (ex) {
								alert('navigateTo failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>调用分享功能</h3>
				<button onclick="callupShare({
						'logoUrl': 'https://hh.ppdaicdn.com/static/images/home/logo.jpg',
						'title': '标题',
						'subTitle': '副标题',
						'shareUrl': 'https://m.huankachaoren.com?shared=1',
						'redbag': 0
					})">callupShare</button>
				<script>
					var callupShare = function (data) {
						try {
							WebViewJavascriptBridge.callHandler('callupShare', {
								'code': 1,
								'name': '调用分享功能',
								'data': data
							});
						} catch(ex) {
							try {
								AppBridge.callupShare(JSON.stringify(data));
							} catch (ex) {
								alert('callupShare failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>显示标题栏分享按钮</h3>
				<button onclick="shareData({
						'logoUrl': 'https://hh.ppdaicdn.com/static/images/home/logo.jpg',
						'title': '标题',
						'subTitle': '副标题',
						'shareUrl': 'https://m.huankachaoren.com?shared=1',
						'redbag': 0
					})">shareData</button>
				<script>
					var shareData = function (data) {
						try {
							WebViewJavascriptBridge.callHandler('shareData', {
								'code': 1,
								'name': '显示标题栏分享按钮',
								'data': data
							});
						} catch(ex) {
							try {
								AppBridge.shareData(JSON.stringify(data));
							} catch (ex) {
								alert('shareData failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>新开webview跳转H5页面</h3>
				<button onclick="navigateH5Url('https://www.baidu.com', '还卡超人')">navigateH5Url</button>
				<script>
					var navigateH5Url = function (url, title) {
						try {
							WebViewJavascriptBridge.callHandler('navigateH5Url', {
								'code': 1,
								'name': '新开webview跳转H5页面',
								'data': {
									'url': url,
									'title': title
								}
							});
						} catch(ex) {
							try {
								AppBridge.navigateH5Url(url, title);
							} catch (ex) {
								alert('navigateH5Url failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>调用地图</h3>
				<button onclick="callupMap({
						'name': '中国石化会立加油站',
						'cityId': 544,
						'cityName': '太原',
						'latitude': 37.936821,
						'longitude': 112.11271,
						'address': '太原',
						'distance': 100,
						'unit': 'm'
					})">callupMap</button>
				<script>
					var callupMap = function (data) {
						try {
							WebViewJavascriptBridge.callHandler('callupMap', {
								'code': 1,
								'name': '调用地图',
								'data': data
							});
						} catch(ex) {
							try {
								AppBridge.callupMap(JSON.stringify(data));
							} catch (ex) {
								alert('callupMap failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>调用登录界面</h3>
				<button onclick="goLogin('https://m.huankachaoren.com', '还卡超人')">goLogin</button>
				<script>
					var goLogin = function (url, title) {
						try {
							WebViewJavascriptBridge.callHandler('goLogin', {
								'code': 1,
								'name': '调用登录界面',
								'data': {
									'url': url,
									'title': title
								}
							});
						} catch(ex) {
							try {
								AppBridge.goLogin(url, title);
							} catch (ex) {
								alert('goLogin failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>进入发标流程</h3>
				<button onclick="goLoan()">goLoan</button>
				<script>
					var goLoan = function () {
						try {
							WebViewJavascriptBridge.callHandler('goLoan', {
								'code': 1,
								'name': '进入发标流程',
								'data': {}
							});
						} catch(ex) {
							try {
								AppBridge.goLoan();
							} catch (ex) {
								alert('goLoan failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>通过客户端调用接口</h3>
				<button onclick="goRequestData('/BorrowApp/UserService/NewUserSetup', {}, 'goRequestDataCallback')">goRequestData</button>
				<script>
					var goRequestData = function (url, param, callback) {
						try {
							WebViewJavascriptBridge.callHandler('goRequestData', {
								'code': 1,
								'name': '通过客户端调用接口',
								'data': {
									'url': url,
									'param': param,
									'callback': callback
								}
							}, goRequestDataCallback);
						} catch(ex) {
							try {
								AppBridge.goRequestData(url, param, callback);
							} catch (ex) {
								alert('goRequestData failed');
								throw ex;
							}
						}
					};
					var goRequestDataCallback = function (data) {
						alert(data);
					};
				</script>
			</li>
			<li>
				<h3>获取客户端信息</h3>
				<button onclick="getAppInfo()">getAppInfo</button>
				<script>
					var getAppInfo = function () {
						try {
							WebViewJavascriptBridge.callHandler('getAppInfo', {
								'code': 1,
								'name': '获取客户端信息',
								'data': {}
							}, getAppInfoCallback);
						} catch(ex) {
							try {
								var res = AppBridge.getAppInfo();
								alert('AppBridge: ' + res);
							} catch (ex) {
								alert('getAppInfo failed');
								throw ex;
							}
						}
					};
					var getAppInfoCallback = function (data) {
						alert(data);
					};
				</script>
			</li>
			<li>
				<h3>进入资管开户后续流程</h3>
				<button onclick="userDepositManagementEnd(1, '1、成功；2、失败；3、异常')">userDepositManagementEnd</button>
				<script>
					var userDepositManagementEnd = function (code, message) {
						try {
							WebViewJavascriptBridge.callHandler('userDepositManagementEnd', {
								'code': 1,
								'name': '进入资管开户后续流程',
								'data': {
									'resultCode': code,
									'resultMessage': message
								}
							});
						} catch(ex) {
							try {
								AppBridge.userDepositManagementEnd(JSON.stringify({
									'resultCode': code,
									'resultMessage': message
								}));
							} catch (ex) {
								alert('userDepositManagementEnd failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
			<li>
				<h3>资管充值提现后续流程</h3>
				<button onclick="rechargeWithdrawCallback(1, 1, 'serialNo01')" style="margin: 0.5em 0;">rechargeWithdrawCallback(充值)</button>
				<button onclick="rechargeWithdrawCallback(2, 1, 'serialNo02')" style="margin: 0.5em 0;">rechargeWithdrawCallback(提现)</button>
				<button onclick="rechargeWithdrawCallback(1, 2, 'serialNo01')" style="margin: 0.5em 0;">rechargeWithdrawCallback(充值，失败)</button>
				<button onclick="rechargeWithdrawCallback(2, 2, 'serialNo02')" style="margin: 0.5em 0;">rechargeWithdrawCallback(提现，失败)</button>
				<button onclick="rechargeWithdrawCallback(1, 3, 'serialNo01')" style="margin: 0.5em 0;">rechargeWithdrawCallback(充值，异常)</button>
				<button onclick="rechargeWithdrawCallback(2, 3, 'serialNo02')" style="margin: 0.5em 0;">rechargeWithdrawCallback(提现，异常)</button>
				<script>
					var rechargeWithdrawCallback = function (type, status, serial) {
						try {
							WebViewJavascriptBridge.callHandler('rechargeWithdrawCallback', {
								'code': +!(status - 1),
								'name': '资管充值提现后续流程',
								'data': {
									'typeCode': type,
									'typeMessage': [
										'充值',
										'提现'
									][type - 1],
									'statusCode': status,
									'statusMessage': [
										'成功',
										'失败',
										'异常'
									][status - 1],
									'serialNo': serial
								}
							});
						} catch(ex) {
							try {
								AppBridge.rechargeWithdrawCallback(JSON.stringify({
									'typeCode': type,
									'typeMessage': [
										'充值',
										'提现'
									][type - 1],
									'statusCode': status,
									'statusMessage': [
										'成功',
										'失败',
										'异常'
									][status - 1],
									'serialNo': serial
								}));
							} catch (ex) {
								alert('rechargeWithdrawCallback failed');
								throw ex;
							}
						}
					};
				</script>
			</li>
		</ol>
		<hr>
		<ol>
			<li>
				<h3>外部打开APP</h3>
				<button onclick="openAPP()">openAPP</button>
				<script>
					var openAPP =  function () {
						var ifr = document.createElement('iframe');
						ifr.src = 'huanapp://';
						ifr.style.display = 'none';
						document.body.appendChild(ifr);
						window.setTimeout(function () {
							document.body.removeChild(ifr);
						}, 3000);
					};
				</script>
			</li>
		</ol>
		<hr>
		<div>
			<button onclick="injectWebViewJavascriptBridge(injectWebViewJavascriptBridgeCallback)" style="width: 100%;">注入WebViewJavascriptBridge</button>
			<script>
				var injectWebViewJavascriptBridge = function (callback) {
					if (window.WebViewJavascriptBridge) {
						return callback(WebViewJavascriptBridge);
					}
					// for ios
					if (window.WVJBCallbacks) {
						return window.WVJBCallbacks.push(callback);
					}
					window.WVJBCallbacks = [callback];
					var WVJBIframe = document.createElement('iframe');
					WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
					WVJBIframe.style.display = 'none';
					document.body.appendChild(WVJBIframe);
					setTimeout(function () {
						document.body.removeChild(WVJBIframe);
					}, 0);
					// for android
					document.addEventListener('WebViewJavascriptBridgeReady', function () {
						callback(WebViewJavascriptBridge);
					}, false);
				};
				var injectWebViewJavascriptBridgeCallback = function (bridge) {
					bridge.registerHandler('testJSFunction', function (data, responseCallback) {
						alert('JS方法被调用:' + data);
						responseCallback('js执行过了');
					});
				};
			</script>
		</div>
	</section>
</body>
</html>
